<style>
    .item-wrap,.wrap-cont {overflow:hidden;padding:2%;}
    .lf-cont {float:left;width:70%;margin-right: 1%;border-right:1px solid #dddddd;}
    .rf-cont,.goods-pic {overflow:hidden;}
    .rf-cont img{max-width:100%;}
    .set-item {float:left;width:25%;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #eeeeee;}
    .goods-pic {overflow:hidden;margin-bottom:20px;}
    .goods-pic .des{float: left;margin-right:15px;margin-top:23px;color:#666;}
    .goods-pic .image-input{float:left;margin-right:10px;}
    .goods-pic p {clear:left;color:#999999;margin-top:13px;text-align:center;}
    .set-item label{display:inline-block;width:33%;text-align:left;color:#666666;float: left;white-space: nowrap;overflow: hidden;}
    .wxapps-cat,.wxapps-tag {margin:5px 0;}
    .select-cont select,.goods-des input,.tag-item select,.item-name {width:60%;border:1px solid #dddddd;border-radius:0;padding:3px 5px;height:25px;line-height:18px;background:white;-webkit-appearance: none;}
    .goods-des input {height:21px;}
    .item-name{width:150px;}
    .lf-cont .cat-title,.item-title {border-bottom:1px solid #dddddd;margin-bottom:10px;padding-bottom:5px;}
    .tag-item {margin-bottom:5px;width:185px;}
    .tag-item select {width:138px;display:inline-block;margin-right: 5px;}
    .sel {position:relative;}
    .sel:after {position:absolute;right:10%;top:10px;content:'';border:5px solid #999999;border-color:#999999 transparent transparent transparent;}
    .tag-item:after {right:55px;}
    .reduce {cursor: pointer;color:#666666;}
    #add_tag {display:inline-block;padding:5px 10px;border-radius:3px;background:#6aca14;cursor:pointer;color: white;transition: all 0.3s ease;}
    #add_tag:hover{background: #509c0c;}
</style>
<div class="wrap-cont">
    <div class="lf-cont">
        <form action="index.php?app=wxapi&ctl=admin_classify&act=apple" method="post" class="tableform" id="form_member_lv">
            <div class="item-title">栏目名称：<input type="text" value="<{$sdf.item_name}>" name="wxapps[item_name]" class="item-name" placeholder="品牌专区"></div>
            <div class="item-wrap">
                    <{assign var="navIdxArr" value=array(0,1,2,3,4,5,6,7) }>
                    <{* dump var=$navIdxArr *}>
                    <{foreach from=$navIdxArr item=value key=key}>
                        <{if $value == 0 || $value == 4}>
                        <{/if}>
                                <div class="set-item">
                                    <div class="goods-pic">
                                        <span class="des">分类图片:</span>
                                        <{input type="image" name="wxapps[children][{$value}][thumLogo]" value=$sdf.children.$value.thumLogo}>
                                        <p>建议尺寸100px*100px</p>
                                    </div>
                                    <div class="select-cont">
                                        <div class="sel wxapps-cat" id="wxapps-cat-<{$value}>">
                                            <label>分类:</label> <select name="wxapps[children][<{$value}>][code]">
                                            <{foreach from=$catList item=cat key=key}>
                                                <option value="<{$cat.cat_id}>" <{if $sdf.children.$value.code == $cat.cat_id }>selected<{/if}> ><{$cat.cat_name}></option>
                                            <{/foreach}>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="goods-des">
                                        <label>分类名称：</label><input type="text" name="wxapps[children][<{$value}>][name]" value="<{$sdf.children.[$value]['name']}>" >
                                    </div>
                                </div>
                        <{if $value == 3 || $value == 7}>
                        <{/if}>
                    <{/foreach}>
            </div>
            <h3 class="cat-title">一级栏目</h3>
            <{foreach from=$sdf.stairlist item=sl key=key}>

            <div id="parent_tag">
                <div class="sel tag-item">
                    <select name="wxapps[stairlist][]">
                        <{foreach from=$tagList item=tag key=key}>
                            <option value="<{$tag.tag_id}>" <{if $sl == $tag.tag_id }>selected<{/if}> ><{$tag.tag_name}></option>
                        <{/foreach}>
                    </select>
                    <span class="reduce">移除</span>
                </div>
            </div>
            <{/foreach}>
            <{* foreach from=$sdf.stairlist item=l key=key *}>
                <!--<div id="parent_tag1">-->
                    <!--<div class="sel tag-item">-->
                        <!--<select name="wxapps[stairlist][]">-->
                            <!--<{foreach from=$tagList item=tag key=key}>-->
                            <!--<option value="<{$tag.tag_id}>" <{if $l == $tag.tag_id }>selected<{/if}> ><{$tag.tag_name}></option>-->
                            <!--<{/foreach}>-->
                        <!--</select>-->
                    <!--</div>-->
                <!--</div>-->
            <{* /foreach *}>
            <span id="add_tag">+新增一级类目</span>

        </form>
    </div>
    <div class="rf-cont">
        <img src="<{$base_url}>/public/app/desktop/statics/images/cat-img.png" alt="">
    </div>
</div>
<div class="table-action">
    <{button type="button" class="btn-primary" label=$___b2c="保存"|t:'b2c' id="member_lv-form-submit"}>
</div>


<script>
    (function(){
        var _form = $('form_member_lv');
        var btn =$('member_lv-form-submit');
        var finder = finderGroup['<{$env.get._finder.finder_id}>'];
        _form.store('target',{
            onSuccess:function(response){
                var hash_res_obj = JSON.decode(response);

            }
        });

        btn.addEvent('click',function(){
            _form.fireEvent('submit',{stop:$empty});
        });

    })();

    function pullTarget(el,id) {
        var _type = $$(el).getValue();
        if(_type == 'cat') {
            $('wxapps-cat-'+id).show();
            $('wxapps-tag-'+id).hide();
        }else{
            $('wxapps-tag-'+id).show();
            $('wxapps-cat-'+id).hide();
        }
    }
    //新增一级类目
    var parentItem = $('parent_tag'),
        $firstItem = parentItem.getFirst();
    $firstItem.getElement('.reduce').setStyle('display','none');
    $('add_tag').addEvent('click',function(){
        var item = parentItem.getFirst().clone();
        parentItem.adopt(item);
        $firstItem.getAllNext().getElement('.reduce').setStyle('display','inline-block');
    })
    //移除一级类目
    parentItem.addEvent('click:relay(".reduce")',function(){
        this.getParent().remove();
    })
    $$('.reduce').addEvent('click',function(){
        this.getParent().remove();
    })
</script>